<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>天游通行证-注册</title>
    <link rel="stylesheet" href="css/reg.css">

</head>

<body>
    <div id="nav">
        <div class="nav-con">
            <ul>
                <li><a href="index.html"><img src="images/t2cn_logo.png" alt=""></a></li>
                <li><a href="index.html">首页</a></li>
                <li><a href="">会员中心</a></li>
                <li><a href="">充值中心</a></li>
                <li><a href="">客服中心</a></li>
                <li><a href="">游乐场</a></li>
                <li><a href="">天游商城</a></li>
                <li><a href=""><img src="images/re.png" alt=""></a></li>
            </ul>

        </div>

    </div>
    <div class="reg_wrap">
        <header class="main_body_header">
            <ul>
                <li class="fl tc current">自定义注册</li>
                <li class="fl tc"><a href="">手机注册</a><span class="reg_tj ht"></span></li>

            </ul>

        </header>

    </div>

    <ul class="new_reg_content">
        <li><label for="userName">通行证帐号：</label>
            <input id="userName" type="text" name="userName" class="newBigText" maxlength="14" />
            <span class="red"> *</span><span class="FailedMsg" id="userNameErr" style="color: red;"></span>
        </li>
        <!-- 手机验证添加 -->
        <li><label for="mobile">手机号码：</label>
            <input type="text" id="mobile" name="mobile" maxlength="11" class="newBigText" name="text" />
            <span class="red"> *</span>
            <span class="red" id="mobileErr"></span>
        </li>
        <li><label for="yzm">验证码：</label>
            <input type="text" id="mobileVd" name="mobileVd" maxlength="6" class="newBigText phone_yzm"
                name="mobileVd" />
            <span style="width:80px;height: 20px;display: inline-block;font-size: 14px; " id="sCode">
            </span>
            <a href="#" onclick="randomCode(6)">看不清</a>
        </li>
        <!-- 结束 -->
        <li><label for="password">登录密码：</label>
            <input type="password" id="password" name="password" class="newBigText" />
            <span class="red"> *</span>
            </span>
        </li>
        <li>
            <label for="repassword">重复密码：</label>
            <input type="password" id="repassword" name="repassword" class="newBigText" />
            <span class="red"> *</span>
            <span class="FailedMsg" id="passwordErr" style="color: red;"></span>
        </li>
        <li class="reg_p">
            <p>根据2010年8月1日实施的《网络游戏管理暂行办法》，网络游戏用户需使用有效身份证件进行实名注册。为保证流畅游戏体验，享受健康游戏生活，请广大游戏玩家尽快实名注册。</p>
        </li>
        <li>
            <label for="realName">真实姓名：</label>
            <input type="text" class="newBigText" size="20" maxlength="8" id="realName" />
            <span class="red"> *</span>
            <span class="FailedMsg" id="realNameErr" style="color: red;"></span>
        </li>
        <li>
            <label for="card">身份证：</label>
            <input type="text" id="card" name="card" class="newBigText" maxlength="18" size="20" />
            <span class="red"> *</span><span class="FailedMsg" id="cardErr" style="color: red;"></span>
        </li>
    </ul>
    <p id="loading"></p>
    <div class="agree">
        <input type="checkbox" id="agree" name="agree" value="agree" />
        <label for="agree">我已经阅读并同意<a target="_blank" href="" style="color:red">最终用户协议</a></label>
    </div>
    <div class="reg_button">
        <input type="button" value="注册通行证" class="reg_btn" id="edit" name="button" />
    </div>
    <div class="company_info">
        <div class="lunabotcon">
            <a class="log" target="_blank" href=""></a>
            <p style="color:rgb(46, 14, 158);">抵制不良游戏 | 拒绝盗版游戏 | 注意自我保护 | 谨防受骗上当 | 适度游戏益脑 | 沉迷游戏伤身 | 合理安排时间 | 享受健康生活</p>
            <p>上海天游软件有限公司 《网络文化经营许可证》编号：沪网文[2018]9896-616号 《增值电信业务经营许可证》 编号：沪B2-20050044</p>
            <p>《互联网出版许可证》编号：新出网证（沪）字34号 文化部网络游戏举报和联系电子信箱：wlwh@vip.sina.com 沪公网安备:3101010010</p>
            <p>沪ICP备10035374号-2 《街头篮球》批准文号：文网测字（2006）018号 《街头篮球》版号： 新出音管[2005] 415号
                <a href="" target="_blank">关于我们</a> <a href="" target="_blank">联系我们</a> <a href=""
                    target="_blank">家长监护工程</a>
            </p>
        </div>
    </div>
    </div>
    </div>
</body>

</html>
<script src="js/jQuery.js">

</script>
<script>
    //用户名
    let flagosexf = false;
    let oname = document.querySelector("#userName");
    oname.onblur = function () {
        var rexName = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/; //用户名正则
        if (rexName.test(this.value)) {
            this.nextElementSibling.nextElementSibling.innerHTML = "用户名正确";
            flagosexf = true;
        } else {
            this.nextElementSibling.nextElementSibling.innerHTML = "用户名错误";
            flagosexf = false;
        }
    }
    //手机号
    let flagPhone = false;
    let ophone = document.querySelector("#mobile");
    ophone.onblur = function () {
        var rexPhone = /^(15|13|18)\d{9}$/;
        if (rexPhone.test(this.value)) {
            this.nextElementSibling.nextElementSibling.innerHTML = "手机号输入正确";
            flagPhone = true;
        } else {
            this.nextElementSibling.nextElementSibling.innerHTML = "手机号输入错误";
            flagPhone = false;
        }
    }
    //验证码
    let flagosCode = false;
    let osCode = document.querySelector("#sCode");

    let ocode = document.querySelector("#mobileVd");
    console.log(osCode)
    let arr = new Array(length);
    //遍历数组
    console.log(osCode);

    let randomCode = function (length) {
        let arr = new Array(length);
        //遍历数组
        for (let i = 0; i < arr.length; i++) {
            //生成一个随机数
            let num = parseInt(Math.random() * 122);
            if ((num >= 0 && num <= 47) || (num >= 58 && num <= 64) || (num >= 91 && num <= 96)) {
                i--;
            } else {
                arr[i] = String.fromCharCode(num)
            }

        }
        let str = arr.join("")
        osCode.innerHTML = str;

    }
    ocode.onblur = function () {
        if (ocode.value == osCode.innerHTML) {
            osCode.innerHTML = "验证码正确";
            flagosCode = true;
        } else {
            osCode.innerHTML = "验证码错误";
            flagosCode = false;
        }
    }
    //密码
    let flagPass = false;
    let opwd = document.querySelector("#password");
    opwd.onblur = function () {
        let rexPass = /^.{6,18}$/ //密码正则
        let regNum = /\d+/; //至少出现一次数字
        let regLetter = /[a-zA-Z]+/; //至少出现一次字母
        letregChar = /[!@#$%]+/; //至少出现一个特殊符号
        //纯
        let _regNum = /^\d+$/; //只能有数字
        let _regLetter = /^[a-zA-Z]+$/; //只能有字母
        let _regChar = /^[!@#$%]+$/; //只能有特殊符号
        if (rexPass.test(this.value)) {
            if (_regNum.test(opwd.value) || _regLetter.test(opwd.value) ||
                _regChar.test(opwd.value)) {
                this.nextElementSibling.innerHTML = "密码等级弱";
            } else if (regNum.test(opwd.value) && regLetter.test(opwd.value) &&
                regChar.test(opwd.value)) {
                this.nextElementSibling.innerHTML = "密码等级强";
            } else {
                this.nextElementSibling.innerHTML = "密码等级中";
            }
            flagPass = true;
        } else {
            this.nextElementSibling.nextElementSibling.innerHTML = "密码输入错误";
            flagPass = false;
        }
    }
    //确认密码
    let flagPass2 = false;
    let oqpwd = document.querySelector("#repassword");
    oqpwd.onblur = function () {
        if (oqpwd.value == opwd.value) {
            this.nextElementSibling.nextElementSibling.innerHTML = "确认密码正确";
            flagPass2 = true;
        } else {
            this.nextElementSibling.nextElementSibling.innerHTML = "确认密码错误";
            flagPass2 = false;
        }
    }
    //姓名
    let flagName = false;
    let orealName = document.querySelector("#realName");
    orealName.onblur = function () {
        let real = /^([\\u4e00-\\u9fa5]{1,20}|[a-zA-Z\\.\\s]{1,20})$/;
        if (real.test(this.value)) {
            this.nextElementSibling.nextElementSibling.innerHTML = "姓名输入合法";
            flagName = true;
        } else {
            this.nextElementSibling.nextElementSibling.innerHTML = "请输入正确的姓名";
            flagName = false;
        }
    }
    //身份证
    let flagId = false;
    let osname = document.querySelector("#card");
    osname.onblur = function () {
        let rexId = /^\d{17}(x|\d)$/;
        if (rexId.test(this.value)) {
            this.nextElementSibling.nextElementSibling.innerHTML = "身份证输入正确";
            flagId = true;
        } else {
            this.nextElementSibling.nextElementSibling.innerHTML = "身份证输入错误";
            flagId = false;
        }
    }
    //同意协议
    let flagAgr = false;
    let oagree = document.querySelector("#agree");
    oagree.onclick = function () {
        if (oagree.checked = true) {
            this.parentNode.previousSibling.innerHTML = " ";
            flagAgr = true;

        }
        else {
            this.parentNode.previousSibling.innerHTML = "请勾选";
            flagAgr = false;
        }

    }

    //页面跳转判断
    let btn = document.getElementById("edit");
    let inp = document.getElementsByTagName("input");
    // console.log(inp)

    // btn.onclick = function () {
    //     if (flagosexf && flagPass2 && flagPhone && flagId && flagPass && flagName && flagosCode && flagAgr) {

    //         window.location.href = "index.html";

    //     } else {
    //         // return false;
    //         alert("验证未通过");
    //     }
    // } 
    // 提交
    // let btn = document.getElementById("edit");
    // let inp = document.getElementsByTagName("input");
    // let bool = false;

    // 提交按钮

    // console.log(1)
    /*1. 验证
            * 遍历所有的input输入框，检验是否输入框为空（或者检验输入是否合法）
                - 如果验证未通过，中止循环
                - 如果验证通过，给bool赋值为true
     2. 提交
            * 根据 bool 的值，来进行判断
                - 如果为true 提交
                - 如果为false 返回
    */
    // btn.onclick = function () {
    //     // console.log(9)
    //     if (flagosexf && flagPass2 && flagPhone && flagId && flagPass && flagName && flagosCode && flagAgr) {

    //         let a = ["userName", "mobile", "mobileVd", "password", "repassword", "realName", "card"];
    //         let b = [];
    //         for (var i = 0, len = inp.length; i < len; i++) {
    //             // console.log(inp[i].value)
    //             if (!!inp[i].value) {
    //                 bool = true;
    //                 b[i] = (a[i] + "=" + inp[i].value);
    //             } else {
    //                 // return bool=false;
    //             }
    //         }
    //    console.log(b.toString().replace(/,/g,'&')) 
    //     console.log(bool)
    //     if (bool) {
    //         // 使用AJAX进行传值后台
    //         console.log(2)
    //         // 这里写ajax方法

    //         let xhr;
    //         if (window.ActiveXObjects) {
    //             //ie
    //             xhr = new ActiveXObject("Microsoft.XMLHttp");
    //         } else {
    //             //非ie
    //             xhr = new XMLHttpRequest();
    //         }
    //         xhr.open("post", "reg.php", true);
    //         //post传参方式的语法:
    //         //1.在调用open方法后,添加请求头
    //         //按照表单post的方式进行提交
    //         xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

    //         //2.将传递的参数通过send方法传递//b.toString().replace(/,/g,'&')
    //         //key1=value1&key2=value2...
    //         // xhr.send("userName="+oname.value+"&mobile="+ophone.value+"&mobileVd="+osCode.value+"&password="+opwd.value);
    //         xhr.send("userName=" + oname.value+"&mobile="+ophone.value+"&password="+opwd.value+"&repassword="+oqpwd.value+"&realName="+orealName.value+"&card="+osname.value)
    //         xhr.onreadystatechange = function () {
    //             // console.log("sss1");
    //             if (xhr.readyState == 4 && xhr.status == 200) {
    //                 // console.log("ss2");

    //                 fun(xhr.responseText);
    //             }
    //         }

    //         function fun(resText) {
    //             let oEdit = document.getElementById("edit");

    //             //前后端分离
    //             if (resText == "1") {
    //                 oEdit.value = "注册失败";
    //             } else {
    //                 // oSpan.innerHTML = "可以注册"; 
    //                 // 然后跳转
    //                 window.location.href = "reg.html";

    //             }
    //         }

    //     }


    // } else {
    //     console.log("验证未通过");

    // }

    // }
    $("#edit").click(function () {
        $.ajax({
            type: "POST",
            url: "reg.php",
            data: {
                userName: $("#userName").val(),
                password: $("#password").val(),
            },
            success: function (msg) {
                console.log(msg);
                if (msg === "1") {
                    //   alert("1")
                    t1 = setTimeout(function () {

                        location.replace("land.html")
                    }, 3000);
                } else {
                    alert("失败")

                }
            }
        });
    })


</script>